---
title: With charts
icon: chart-pie
category: Reports
---

<Frame background="subtle"><img src="../../images/previews/ui-templates-report-charts-7d5e23ad/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>

```jsx
import { Footnote, PageBottom, Tailwind, CSS } from "@fileforge/react-print";
import {
  BarChart,
  XAxis,
  YAxis,
  Bar,
  Legend,
  PieChart,
  Pie,
  Cell,
} from "recharts";

export const dailyData = [
  {
    date: new Date("2024-01-01").getTime(),
    electricity: 4000,
    gas: 2400,
    oil: 2800,
  },
  {
    date: new Date("2024-01-02").getTime(),
    electricity: 3000,
    gas: 1398,
    oil: 2210,
  },
  {
    date: new Date("2024-01-03").getTime(),
    electricity: 2000,
    gas: 9800,
    oil: 2290,
  },
  {
    date: new Date("2024-01-04").getTime(),
    electricity: 2780,
    gas: 3908,
    oil: 2000,
  },
  {
    date: new Date("2024-01-05").getTime(),
    electricity: 1890,
    gas: 4800,
    oil: 2181,
  },
  {
    date: new Date("2024-01-06").getTime(),
    electricity: 2390,
    gas: 3800,
    oil: 2500,
  },
  {
    date: new Date("2024-01-07").getTime(),
    electricity: 3490,
    gas: 4300,
    oil: 2100,
  },
  {
    date: new Date("2024-01-08").getTime(),
    electricity: 4000,
    gas: 2400,
    oil: 2800,
  },
  {
    date: new Date("2024-01-09").getTime(),
    electricity: 3000,
    gas: 1398,
    oil: 2210,
  },
  {
    date: new Date("2024-01-10").getTime(),
    electricity: 2000,
    gas: 9800,
    oil: 2290,
  },
  {
    date: new Date("2024-01-11").getTime(),
    electricity: 2780,
    gas: 3908,
    oil: 2000,
  },
  {
    date: new Date("2024-01-12").getTime(),
    electricity: 1890,
    gas: 4800,
    oil: 2181,
  },
  {
    date: new Date("2024-01-13").getTime(),
    electricity: 2390,
    gas: 3800,
    oil: 2500,
  },
  {
    date: new Date("2024-01-14").getTime(),
    electricity: 3490,
    gas: 4300,
    oil: 2100,
  },
  {
    date: new Date("2024-01-15").getTime(),
    electricity: 4000,
    gas: 2400,
    oil: 2800,
  },
  {
    date: new Date("2024-01-16").getTime(),
    electricity: 3000,
    gas: 1398,
    oil: 2210,
  },
  {
    date: new Date("2024-01-17").getTime(),
    electricity: 2000,
    gas: 9800,
    oil: 2290,
  },
  {
    date: new Date("2024-01-18").getTime(),
    electricity: 2780,
    gas: 3908,
    oil: 2000,
  },
  {
    date: new Date("2024-01-19").getTime(),
    electricity: 1890,
    gas: 4800,
    oil: 2181,
  },
  {
    date: new Date("2024-01-20").getTime(),
    electricity: 2390,
    gas: 3800,
    oil: 2500,
  },
  {
    date: new Date("2024-01-21").getTime(),
    electricity: 3490,
    gas: 4300,
    oil: 2100,
  },
  {
    date: new Date("2024-01-22").getTime(),
    electricity: 4000,
    gas: 2400,
    oil: 2800,
  },
  {
    date: new Date("2024-01-23").getTime(),
    electricity: 3000,
    gas: 1398,
    oil: 2210,
  },
  {
    date: new Date("2024-01-24").getTime(),
    electricity: 2000,
    gas: 9800,
    oil: 2290,
  },
  {
    date: new Date("2024-01-25").getTime(),
    electricity: 2780,
    gas: 3908,
    oil: 2000,
  },
  {
    date: new Date("2024-01-26").getTime(),
    electricity: 1890,
    gas: 4800,
    oil: 2181,
  },
  {
    date: new Date("2024-01-27").getTime(),
    electricity: 2390,
    gas: 3800,
    oil: 2500,
  },
  {
    date: new Date("2024-01-28").getTime(),
    electricity: 3490,
    gas: 4300,
    oil: 2100,
  },
];

export const synthesisData = [
  {
    name: "Electricité",
    value: 400,
  },
  {
    name: "Gaz",
    value: 300,
  },
  {
    name: "Pétrole",
    value: 300,
  },
];

<Tailwind>
  <CSS>{`@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

      @page {
        size: a4;
        margin: .75in .75in 1in .75in;
      }
      `}</CSS>

  <main className="text-slate-800 font-[inter]">
    <PageBottom>
      <div className="text-xs text-slate-400 border-t border-t-slate-300 py-4 mt-4 flex border-b border-b-slate-300">
        <div>Consommation énergétique - Janvier 2024</div>
        <div className="flex-grow" />
        <div>
          Fourni par{" "}
          <a
            href="https://www.enerflow.ai/"
            target="_blank"
            className="underline underline-offset-2 "
          >
            EnerFlow
          </a>
        </div>
      </div>
    </PageBottom>
    <div className="flex items-center pb-6 mb-6 border-b">
      <div className="flex-grow">
        <h1 className="font-bold text-2xl">Rapport de consommation</h1>
        <p className="text-slate-500 ">
          1231 Rue des Sources, Montréal, QC H3J 1C6
        </p>
      </div>
      <img
        src="https://framerusercontent.com/images/UM8IiaGXuEviaIXCXI1zvRJYd2k.svg"
        className="h-12 block"
      />
    </div>
    <div className="my-6">
      <h2 className="mb-6">Votre mois de janvier 2024</h2>
      <BarChart
        width={730}
        height={250}
        data={dailyData}
        margin={{
          top: 20,
          left: 10,
          right: 10,
        }}
        style={{
          width: "100%",
          height: "auto",
        }}
      >
        <XAxis
          axisLine={false}
          dataKey="date"
          type="number"
          scale="time"
          domain={[
            new Date("2024-01-01").getTime(),
            new Date("2024-01-14").getTime(),
          ]}
          tickFormatter={(date) => new Date(date).toLocaleDateString()}
          ticks={dailyData
            .map((d, i) => ((i + 3) % 7 === 0 ? d.date : null))
            .filter((d) => d !== null)}
        />
        <Bar
          barSize={13}
          dataKey="electricity"
          fill="#fcd656"
          stroke="#fcd656"
          stackId="1"
          legendType="line"
          name="Electricité"
        />
        <Bar
          barSize={13}
          dataKey="gas"
          fill="#ec6666"
          stroke="#ec6666"
          stackId="1"
          legendType="line"
          name="Gaz"
        />
        <Bar
          barSize={13}
          dataKey="oil"
          fill="#1479d4"
          stroke="#1479d4"
          stackId="1"
          legendType="line"
          name="Pétrole"
        />
      </BarChart>
    </div>
    <div className="flex -mx-4">
      <div className="basis-0 flex-grow m-4 bg-slate-100 rounded-xl p-6">
        <h2 className="text-xl font-bold">Consommation combinée</h2>
        <PieChart
          width={300}
          height={160}
          className="my-6"
          style={{
            width: "100%",
            height: "auto",
          }}
        >
          <Pie
            cx="50%"
            cy="100%"
            outerRadius={115}
            startAngle={180}
            endAngle={0}
            label
            data={synthesisData}
            dataKey="value"
          >
            {synthesisData.map((entry, index) => (
              <Cell
                key={`cell-${index}`}
                fill={
                  index === 0 ? "#fcd656" : index === 1 ? "#ec6666" : "#1479d4"
                }
              />
            ))}
          </Pie>
        </PieChart>
        <p>
          Ce mois-ci, votre consommation combinée d'électricité, de gaz et de
          pétrole s'élève à 1000 kWh.
        </p>
      </div>
      <div className="basis-0 flex-grow m-4 bg-slate-100 rounded-xl p-6">
        <h2 className="text-xl font-bold">Consommation combinée</h2>
        <PieChart
          width={300}
          height={160}
          className="my-6"
          style={{
            width: "100%",
            height: "auto",
          }}
        >
          <Pie
            cx="50%"
            cy="100%"
            outerRadius={115}
            startAngle={180}
            endAngle={0}
            label
            data={synthesisData}
            dataKey="value"
          >
            {synthesisData.map((entry, index) => (
              <Cell
                key={`cell-${index}`}
                fill={
                  index === 0 ? "#fcd656" : index === 1 ? "#ec6666" : "#1479d4"
                }
              />
            ))}
          </Pie>
        </PieChart>
        <p>
          Ce mois-ci, votre consommation combinée d'électricité, de gaz et de
          pétrole s'élève à 1000 kWh.
        </p>
      </div>
    </div>
  </main>
</Tailwind>;

```

